<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- <link href="css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    <link href="css/style.min862f.css?v=4.1.0" rel="stylesheet"> -->

    <link rel="shortcut icon" href="favicon.ico">
    <link href="css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    <link href="css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
    <link href="css/animate.min.css" rel="stylesheet">
    <link href="css/style.min862f.css?v=4.1.0" rel="stylesheet">
    <style>
        .title{
            margin: -10px 0px 0px 50px;
        }
        .block{
            margin: 20px 0px 0px -10px;
        }
        .ibox-content {
            /* margin: -0.5px 0 0 0; */
            border: none;
            width: 130px;
            height: 100%;
            /* background: #1A8080; */
            background: #17a084;
            padding: 15px 20px 10px 10px;
        }

        .one {
            height: 81px;
            /* width: 55px; */
            /* background: #1A8080; */
            background: #17a084;
            display: flex;
            align-items: center
        }

        .one img {
            align-items: center;
        }

        .one font {
            font-weight: bold;
            font-size: 20px;
        }
        strong{
            font-size: 17px;
            margin: 0px 0px 0px 200px;
        }

        p {
            color: white;
        }
        .class{
            height: 20px;
        }
        .two{
            top: 20px;
        }
        #barTransverse ,#lineChart,#pieChart{  
            width: 680px;
            height: 320px;
        }   
        .barTransverseDiv{
            margin: -20px 0px 0px -55px;
        }
        
        .lineChartDiv{   
            margin: -20px 0px 0px -40px;
        }
       
        .pieChartDiv{   
            margin: -20px 0px 0px -20px;
        }
    </style>
</head>

<body>
    <div class="row white-bg dashboard-header">
        <div class="col-sm-6 block">
            <div class="col-sm-12">
                <div class="title">
                    <strong>人员统计<br></strong>
                    &nbsp;
                </div>
            </div>
            <div class="col-sm-12">
                <div class="col-sm-4">
                    <div class="col-sm-12 one">
                        <img src="img/logo1.gif ">
                        <div class="ibox-content">
                            <p>10</p>
                            <p>上胎工</p>
                        </div>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="col-sm-12 one">
                        <img src="img/logo1.gif ">
                        <div class="ibox-content ">
                            <p>10</p>
                            <p>贴花工</p>
                        </div>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="col-sm-12 one">
                        <img src="img/logo1.gif ">
                        <div class="ibox-content ">
                            <p>10</p>
                            <p>彩选工</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-sm-12 two">
                <div class="col-sm-4">
                    <div class="col-sm-12 one">
                        <img src="img/logo2.gif ">
                        <div class="ibox-content ">
                            <p>10</p>
                            <p>擦验工</p>
                        </div>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="col-sm-12 one">
                        <img src="img/logo2.gif ">
                        <div class="ibox-content ">
                            <p>10</p>
                            <p>上胎工</p>
                        </div>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="col-sm-12 one">
                        <img src="img/logo2.gif ">
                        <div class="ibox-content ">
                            <p>10</p>
                            <p>装窑工</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 barTransverseDiv">
            <div id="barTransverse"></div>
        </div>
        <div class="col-sm-6 lineChartDiv">
            <div id="lineChart"></div>
        </div>
        <div class="col-sm-6 pieChartDiv">
            <div id="pieChart"></div>
        </div>


    </div>
    <script src="js/jquery.min.js"></script>
    <script src="js/echarts.min.js"></script>
    <script>
        var barTransverse = echarts.init(document.getElementById('barTransverse'));
        var lineChart = echarts.init(document.getElementById('lineChart'));
        var pieChart = echarts.init(document.getElementById('pieChart'));
        //右上  生产进度条形图
        var barTransverseOption = {
            title: {
                text: '生产进度',
                // subtext: '纯属虚构',
                // font-family:Arial,
                x: 'center',
                top: 25
            },
            grid: { containLabel: true },
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'line'        // 默认为直线，'line' | 'shadow'
                },
                formatter: function (params) { //自定义函数修改折线图给数据加单位
                    console.log(params)
                    var str = '';//声明一个变量用来存储数据
                    str += '<div>' + params[0].name + '</div>';   //显示日期的函数
                    for (var i = 0; i < params.length; i++) {  //图显示的数据较多时需要循环数据，这样才可以成功的给多条数据添加单位
                        str += (params[i].data ? params[i].data + '%' : '暂无');
                    }
                    return str;
                }
            },
            xAxis: {
                type: 'value',
                min: 0,
                max: 100,
                boundaryGap: [0, 0.01],
                axisLabel: {
                    formatter: '{value} °%'
                }
            },

            yAxis: {
                type: 'category',
                data: ['上胎', '彩选', '烤花', '剪花纸', '擦验', '贴花']
            },
            series: [
                {
                    type: 'bar',
                    barWidth: 20,//柱子宽度
                    itemStyle: { // 柱子上方的数值
                        normal: {
                            color: '#17a084'
                            // label: {
                            //     show: true,
                            //     position: 'right',
                            //     textStyle: {
                            //         fontWeight: 'bolder',
                            //         fontSize: '12',
                            //         fontFamily: '微软雅黑',
                            //         color: '#1CD8A8'
                            //         //distance: 20 // 距离
                            //     }
                            // },
                            // formatter: '{value} °%',
                        }
                    },
                    data: [50, 65, 37, 66, 40, 30]
                }
            ]
        };
        barTransverse.setOption(barTransverseOption);

        //左下  订单统计折线图
        lineOption = {
            title: {
                text: '订单数量',
                // subtext: '纯属虚构',
                x: 'center'
            },
            xAxis: {
                type: 'category',
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
            },
            yAxis: {
                type: 'value',
                min: 0,
                max: 12,
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'line'        // 默认为直线，'line' | 'shadow'
                }
            },
            series: [{
                itemStyle: { // 柱子上方的数值
                    normal: {
                        color: '#17a084'
                    }
                },
                data: [3, 2, 5, 4, 7, 9, 10, 8, 6, 7, 5, 7],
                type: 'line'
            }]
        };
        lineChart.setOption(lineOption);

        //右下 破损率饼状图
        pieOption = {
            title: {
                text: '破损率',
                // subtext: '纯属虚构',
                x: 'center'
            },
            grid: {
                x: 20,
                y: 100,
                top: 100,
                containLabel: true
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                top: 20,
                right: 100,
                data: ['彩选', '烤花', '擦验', '贴花', '剪花纸']
            },
            color : [ '#24c6c8', 'orange', '#f8ac5a', 'green', '#17a084'],
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '55%',
                    data: [
                        { value: 335, name: '彩选' },
                        { value: 310, name: '烤花' },
                        { value: 234, name: '擦验' },
                        { value: 135, name: '贴花' },
                        { value: 1548, name: '剪花纸' }
                    ],
                    center: [335, 170],//饼图中心点位置
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        pieChart.setOption(pieOption);
    </script>
</body>

</html>